import React, {Component} from 'react';
import {Form, Input, Button, Checkbox, Card, message} from 'antd';
import {withRouter} from "react-router-dom";
import {login, register} from "../api/users";
import {USER_ADD} from "../store/actions";
import {connect} from 'react-redux';
const layout = {
  labelCol: {span: 4},
  wrapperCol: {span: 16},
};
const tailLayout = {
  wrapperCol: {offset: 4, span: 16},
};


class Submit extends Component {

  onFinish = values => {
    let {isLogin, addUserToStore} = this.props;
    console.log('Success:', values);
    //不好的地方?
    //1. 不方便维护
    //2. 出错的地方全部都放在一个地方会更好一些
    //3. 每次请求都要携带请求头
    // axios.post('/register').then(res=>{
    //   message.success('注册成功');
    // }).catch(err=>{
    //   message.error('出错了')
    // })

    // register(参数)
    if (isLogin) {
      login({username: values.username, password: values.password}).then(({code, msg, data}) => {
        if (code === 1) {
          message.success(msg);
          //跳转到详情页面
          this.props.history.replace('/main/list');
          addUserToStore(data)
        }
      })
    } else {
      // 判断两次密码一不一致
      // 后端判断用户名是否重复
      //注册
      register({username: values.username, password: values.password}).then(({code, msg}) => {
        if (code === 1) {
          message.success(msg);
          this.props.history.goBack();
        }
      })
    }
  };

  onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
  };


  render() {

    let {isLogin} = this.props;

    return (
      <Card title={isLogin ? '登录' : '注册'} style={{width: 800, margin: '0 auto'}}>

        <Form
          {...layout}
          name="basic"
          initialValues={{remember: true}}
          onFinish={this.onFinish}
          onFinishFailed={this.onFinishFailed}
        >
          <Form.Item
            label="用户名"
            name="username"
            rules={[{required: true, message: '请输入用户名'}]}
          >
            <Input/>
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[{required: true, message: '请输入密码'}]}
          >
            <Input.Password/>
          </Form.Item>
          {
            !isLogin &&
            <Form.Item
              label="再次输入密码"
              name="rePassword"
              rules={[{required: true, message: '请再次输入密码'}]}
            >
              <Input.Password/>
            </Form.Item>
          }

          {
            isLogin && <Form.Item {...tailLayout} name="remember" valuePropName="checked">
              <Checkbox>记住我</Checkbox>
              <Button type='link' onClick={() => {
                this.props.history.push('/register');
              }}>注册</Button>
            </Form.Item>
          }

          <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit">
              {isLogin ? '登录' : '注册'}
            </Button>
          </Form.Item>
        </Form>
      </Card>
    );
  }
}

const mapStateToProps = (state) => {
  return {}
};


const mapDispatchToProps = (dispatch) => {
  return {
    addUserToStore(userInfo) {
      dispatch({type: USER_ADD, userInfo})
    }
  }
};


export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Submit));
